<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { showNotify } from 'vant';
import { useRouter } from 'vue-router'
// import { useStore } from 'vuex'

import { useUser } from '@/composition/useUser'

const { loginModel, user, login, loggedIn, logout, regist, sendRegistVerifyCode } = useUser();


const router = useRouter()
// const store = useStore()


// do not use same name with ref

const password2 = ref('');

const curOperType = ref('login');

const onSubmit = (values) => {
  console.log('submit', values);
  if (curOperType.value == 'regist') {
    regist();
    return;
  }
  login();
};


const onClickLeft = () => {
  // const onClickLeft = () => history.back();
  router.push('/')
};



</script>

<template>
  <div class="login">

    <!-- v-if="!loggedIn" -->
    <van-form @submit="onSubmit">

      <van-cell-group inset v-if="loggedIn">
        <van-field label="已登录账号" :model-value="user.baseInfo.userName" readonly />
      </van-cell-group>

      <van-cell-group inset v-if="!loggedIn">
        <van-field v-model="loginModel.username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="loginModel.password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />

        <template v-if="curOperType == 'regist'">
          <van-field v-model="loginModel.password2" type="password" name="再次填写密码" label="再次填写密码" placeholder="再次填写密码"
            :rules="[{ required: true, message: '请再次填写密码' }]" />

          <van-field v-model="loginModel.email" type="email" name="邮箱" label="邮箱" placeholder="请填写邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]" />

          <van-field v-model="loginModel.verifyCode" clearable label="邮箱验证码" placeholder="请输入邮箱验证码"
            :rules="[{ required: true, message: '请填写邮箱验证码' }]">
            <template #button>
              <van-button size="small" type="primary" @click="sendRegistVerifyCode">发送验证码</van-button>
            </template>
          </van-field>
        </template>
      </van-cell-group>

      <template v-if="!loggedIn && curOperType == 'login'">
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>

        <div style="margin: 16px;">
          <van-button round block plain type="primary" @click="curOperType = 'regist'">无账号？注册一个</van-button>
        </div>

        <div style="margin: 16px;">
          <van-button round block plain type="primary" @click="curOperType = 'resetPassword'">忘记密码？重置一下</van-button>
        </div>

      </template>


      <template v-if="curOperType == 'regist'">
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">注册</van-button>
        </div>

        <div style="margin: 16px;">
          <van-button round block plain type="primary" @click="curOperType = 'login'">返回登录</van-button>
        </div>
      </template>


      <div style="margin: 16px;" v-show="loggedIn">
        <van-button round block plain type="primary" @click="logout">退出登录</van-button>
      </div>


    </van-form>
  </div>
</template>

<style scoped>
.login {
  display: grid;
  max-width: 600px;
  margin: 60px auto;
}
</style>
